@import "./colors";

.pretty-radio {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;

  * {
    box-sizing: content-box;
  }

  input[type="radio"] {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);

    &.hidden {
      width: 0;
      height: 0;
    }

    + .dot {
      display: block;
      position: absolute;
      left: 50%;
      margin-left: -10px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background-color: $whiteColor;
      border: 1px solid $grayBlueColor;
      box-shadow: inset 0px 0px 1px $grayBlueColor;

      &.disabled {
        display: none;
      }
    }

    &:checked + .dot {
      &:before {
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background-color: $greenColor;
        content: " ";
      }
    }
  }
}

